<template>
  <!-- 登录 -->
  <view class="container flex-items-plus flex-column" :style="{ backgroundImage: `url(${VUE_APP_STATIC_URL}ui-static/zwx-static/login/bg.png)` }">
    <view class="login-logoBox">
      <image
        class="login-logo"
        :src="`${VUE_APP_STATIC_URL}ui-static/zwx-static/login/logo.png`"
      ></image>
    </view>
    <view>
      <view class="iphoneNum-box">
        <view class="box_title">手机号</view>
        <view>
          <input
            v-model="loginQuery.account"
            class="iphoneNum-inputbox"
            placeholder-class="iphoneNum-input"
            type="number"
            maxlength="11"
            placeholder="请输入您的手机号"
          />
        </view>
      </view>
      <view class="code-box mar-top-20">
        <view class="box_title">图片验证码</view>
        <view class="flex justify-between items-center">
          <view>
            <input
              v-model="VerifyQuery.code"
              :maxlength="4"
              placeholder-class="codeNum-input"
              placeholder="请输入图片验证码"
            />
          </view>
          <view class="getcode">
            <image
              v-if="captcha"
              :src="captcha"
              mode=""
              @click="loadImage"
            ></image>
          </view>
        </view>
      </view>
      <view class="code-box mar-top-20">
        <view class="box_title">验证码</view>
        <view class="flex justify-between items-center">
          <view>
            <input
              v-model="loginQuery.code"
              :maxlength="4"
              class="codeNum-inputbox"
              placeholder-class="codeNum-input"
              placeholder="请输入验证码"
            />
          </view>
          <view
            :class="disabled === true ? 'on' : ''"
            :disabled="disabled"
            class="getcode"
            @click="codede"
          >
            {{ text }}
          </view>
        </view>
      </view>
    </view>
    <view class="mar-top-60">
      <SubmitButtonNew
        width="650rpx"
        height="78rpx"
        radius="78rpx"
        customClass="mar-top-60"
        color="#fff"
        bgColor="linear-gradient(90deg, #FF9000, #FF5000)"
        text="登录"
        @submitEvent="login"
      />
    </view>
  </view>
</template>
<script setup>
import { VUE_APP_STATIC_URL } from "@/config/api";
import { ref } from "vue";
import { request } from "../../utils/request";
import API from "../../config/api";
import { onLoad } from "@dcloudio/uni-app";
import { btnUseLoading } from "../../hooks/bntUseLoading";

const { btnShowLoading, btnHideLoading } = btnUseLoading();
const loginQuery = ref({
  account: "",
  code: "",
  salesId: "",
});

const VerifyQuery = ref({
  phone: "",
  code: "",
});

const inviteSpell = ref({});
const inviteSpelltype = ref(false);
const beforePage = ref(undefined);
const doubleBeforePage = ref(undefined);
const disabled = ref(false);
const text = ref("获取验证码");
let captcha = ref("");
onLoad((options) => {
  if (options.inviteSpell == 1) {
    inviteSpelltype.value = true;
    inviteSpell.value = uni.getStorageSync("inviteSpell");
  }
  loginQuery.value.salesId = uni.getStorageSync("salesId");
  const pages = getCurrentPages();
  if (pages.length >= 2) {
    beforePage.value = pages[pages.length - 2];
  }
  if (pages.length >= 3) {
    doubleBeforePage.value = pages[pages.length - 3];
  }
  captcha.value = API.GetCaptcha;
});
const loadImage = () => {
  captcha.value = API.GetCaptcha + "?" + Math.random();
};
const login = async () => {
  let phoneCodeVerification = /^[1][3-9][0-9]{9}$/;
  if (loginQuery.value.account == "") {
    uni.showToast({
      title: "请输入手机号！",
      duration: 2000,
      icon: "none",
    });
  } else if (!phoneCodeVerification.test(loginQuery.value.account)) {
    uni.showToast({
      title: "请输入正确的手机号！",
      duration: 2000,
      icon: "none",
    });
  } else {
    btnShowLoading();
    try {
      const res = await request(
        API.Login,
        {
          type: 2,
          phone: loginQuery.value.account,
          verificationCode: loginQuery.value.code,
        },
        "POST"
      );
      uni.hideLoading();
      const item = res.data;
      uni.setStorageSync("storage_key", item);
      if (uni.getStorageSync("salesId")) {
        let salesId = uni.getStorageSync("salesId");
        let shopId = uni.getStorageSync("shopId");
        bindSalesCustomer(salesId, shopId);
        uni.removeStorageSync("salesId");
        uni.removeStorageSync("shopId");
      }
      // 购物车右上角数量
      request(API.ShoppingCart, {}, "GET").then((resCart) => {
        let cartNum = 0;
        resCart.data.forEach((shopItem) => {
          shopItem.skus.forEach((goodsItem) => {
            cartNum += goodsItem.number;
          });
        });
        if (cartNum > 0) {
          uni.setTabBarBadge({
            index: 3,
            text: cartNum.toString(),
          });
        }
        uni.setStorageSync("allCartNum", cartNum);
      });
      if (inviteSpelltype.value == true) {
        setTimeout(function () {
          uni.reLaunch({
            url:
              "../../zwx_category_page1/goodsModule/inviteSpell?collageId=" +
              inviteSpell.value.collageId +
              "&orderId=" +
              inviteSpell.value.orderId +
              "&type=0" +
              "&productId=" +
              inviteSpell.value.productId +
              "&skuId=" +
              inviteSpell.value.skuId,
          });
          uni.removeStorageSync("inviteSpell");
        }, 2000);
      } else {
        if (
          beforePage.value &&
          beforePage.value.route !==
            "zwx_category_page2/userModule/accountLogin" &&
          beforePage.value.route !== "zwx_category_page2/userModule/login" &&
          beforePage.value.route !== "zwx_category_page2/userModule/register"
        ) {
          uni.navigateBack({
            delta: 1,
          });
        } else if (
          doubleBeforePage.value &&
          doubleBeforePage.value.route !==
            "zwx_category_page2/userModule/accountLogin" &&
          doubleBeforePage.value.route !==
            "zwx_category_page2/userModule/login" &&
          doubleBeforePage.value.route !==
            "zwx_category_page2/userModule/register"
        ) {
          uni.navigateBack({
            delta: 2,
          });
        } else {
          setTimeout(function () {
            uni.switchTab({
              url: "/pages/tabbar/user/index",
            });
          }, 600);
        }
      }
    } catch (error) {
      uni.hideLoading();
      uni.showToast({
        title: res.data.message,
        duration: 2000,
        icon: "none",
      });
      throw new Error(error);
    } finally {
      btnHideLoading();
    }
  }
};

// 获取验证码
const codede = () => {
  if (disabled.value) return;
  getVerify();
};
const getVerify = async () => {
  let phoneCodeVerification = /^[1][3-9][0-9]{9}$/;
  if (loginQuery.value.account == "") {
    uni.showToast({
      title: "请输入手机号！",
      duration: 2000,
      icon: "none",
    });
  } else if (!phoneCodeVerification.test(loginQuery.value.account)) {
    uni.showToast({
      title: "请输入正确的手机号！",
      duration: 2000,
      icon: "none",
    });
  } else {
    if (!VerifyQuery.value.code)
      return uni.showToast({
        title: "请输入图片验证码！",
        duration: 2000,
        icon: "none",
      });
    VerifyQuery.value.phone = loginQuery.value.account;
    try {
      const res = await request(
        API.Verify,
        {
          code: VerifyQuery.value.code,
          phone: VerifyQuery.value.phone,
        },
        "GET"
      );
      sendCode();
    } catch (error) {
      uni.showToast({
        title: error.data.message,
        duration: 1000,
        icon: "none",
      });
    }
  }
};
// 绑定关系
const bindSalesCustomer = async (salesId, storeId) => {
  if (salesId && storeId) {
    try {
      const response = await request(
        API.BindSalesCustomer,
        {
          shopId: storeId,
          distributorId: salesId,
        },
        "POST"
      );
      uni.showToast({
        title: "绑定成功",
        icon: "none",
      });
    } catch (error) {
      uni.showToast({
        title: error.data.message,
        icon: "none",
      });
    }
  }
};

const sendCode = () => {
  if (disabled.value) return;
  disabled.value = true;
  let n = 60;
  text.value = "剩余 " + n + "s";
  const run = setInterval(() => {
    n = n - 1;
    if (n < 0) {
      clearInterval(run);
    }
    text.value = "剩余 " + n + "s";
    if (text.value < "剩余 " + 0 + "s") {
      disabled.value = false;
      text.value = "重新获取";
    }
  }, 1000);
};
</script>
<style lang="scss">
.container {
  background-position: top center;
  background-size: cover;
  height: 100vh;

  .login-logoBox {
    margin-top: -300rpx;

    .login-logo {
      width: 218rpx;
      height: 220rpx;
    }
  }

  .box_title {
    font-family: Source Han Sans CN;
    font-weight: 500;
    font-size: 30rpx;
    color: #3b3b3b;
    margin-bottom: 20rpx;
  }

  .iphoneNum-box {
    margin-top: 100rpx;
    border-bottom: 1rpx solid #dddddd;
    // height: 100rpx;
    width: 600rpx;

    .loginIcon {
      width: 40rpx;
      height: 53rpx;
    }

    input {
      font-size: 28rpx;
    }

    .iphoneNum-input {
      color: #999999;
      font-size: 28rpx;
      font-weight: 400;
    }

    .iphoneNum-inputbox {
      height: 80rpx;
    }
  }

  .code-box {
    border-bottom: 1rpx solid #dddddd;
    // height: 100rpx;
    // width: 360rpx;
    // display: flex;
    // flex-direction: row;
    // justify-content: space-between;
    // align-items: center;

    .loginIcon {
      width: 44rpx;
      height: 50rpx;
    }

    input {
      font-size: 28rpx;
    }

    .code-lab {
      width: 200rpx;
    }

    .codeNum-input {
      color: #999999;
      font-size: 28rpx;
      font-weight: 400;
      width: 300rpx;
    }

    .codeNum-inputbox {
      width: 300rpx;
    }
  }

  .getcode {
    height: 80rpx;
    width: 230rpx;
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    align-items: center;
    margin-left: 20rpx;
    color: #FF5000;
    image {
      width: 100%;
      height: 100%;
    }
	&[disabled=true]{
		color: #9F9F9F;
	}
  }

  .getcodeActive {
    background-color: #dddddd;
    height: 100rpx;
    width: 220rpx;
    border-radius: 44rpx;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    margin-left: 20rpx;
    color: #333333;
  }
}
</style>
